<template>
	<view>
		<view class="topbox">
			 <scroll-view  scroll-x="true" class="">
				<view class="top">
					  <view class="topLine"  :class="titleIndex == index? 'active':''" v-for="(item,index) in titleList" :key="index" @click="titleBtn(index,item.id)">{{item.name}}</view>
				</view>
			   </scroll-view>
			</view>
		<view class="Know_lsit">
			<view class="Know_item" v-for="(item,index) in articleList" @click="godetail(item)">
				<image class="Know_item_img" :src="item.image"></image>
				<view class="Know_item_info">
					<view class="over2">{{item.title}}</view>
					<view class="Know_info_fb">
						<text>平台发布</text>
						<text>{{item.create_at}}</text>
					</view>
				</view>
			</view>
		</view>
		<uLi-load-more v-if="articleList.length>=5" :status="loadingType" :contentText="contentText" ></uLi-load-more>
	</view>
</template>
<script>
	import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more.vue"
	import util from '../../static/util.js'
	export default {
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				titleList:'',
				titleIndex:0,
				id:'',
				cate_id:'',
				page:1,
				articleList:'',
				loadingText: '加载中...',
				loadingType: 'more',//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
				       contentdown:'上拉显示更多',
				       contentrefresh: '正在加载...',
				       contentnomore: '没有更多数据了',
				 },
			};
		},
		onLoad(){
			this.getArticleTypeList()
		},
		onReachBottom(){
			this.page=this.page+1
			this.getArticleList()
			console.log("触底")
		},
		methods: {
		   titleBtn(index,id){
			   this.titleIndex=index
			   this.cate_id=id;
			   this.articleList=""
			   this.page=1
			   this.getArticleList()
		   },
		   getArticleTypeList(){
			   var that=this;
			   that.ajax({
			   	url:'api/article/getArticleTypeList',
			   	success:function(res){
			   		console.log(res)
			   		that.titleList=res.data;
					that.cate_id=res.data[0].id;
					that.getArticleList()
			   	}
			   })
		   },
		   getArticleList(){
			   var that=this;
			   that.ajax({
			   	url:'api/article/getArticleList',
				data:{
					page:that.page,
					limit:10,
					cate_id:that.cate_id
				},
			   	success:function(res){
					if(res.code!=200){
						that.articleList=""
					}else{
						if(that.page==1){
							that.articleList=res.data.data
						} 
						if(that.page>1){
							if(res.data.data.length>0){
								that.articleList=that.articleList.concat(res.data.data)
								that.loadingType = 'more';//将loadingType归0重置
								uni.hideNavigationBarLoading();//关闭加载动画
							}else{  
								that.loadingType = 'noMore';//将loadingType归0重置
								uni.hideNavigationBarLoading();//关闭加载动画
							}
						}
						
						
					}
			   	 
			   		
			   					
			   	}
			   })
		   },
		   godetail(item){
			  uni.navigateTo({
			  	url:'articleDetail?id='+item.id
			  }) 
		   }
		}
	}
</script>

<style lang="less" scoped >
	.topbox{
/* 		overflow-x: hidden;
		width: 100vw; */
	}
	.top{
		display: flex;
		padding: 15rpx 30rpx;
		width: auto;
		flex-wrap: nowrap;
	}
	.topLine{
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 15rpx;
		white-space: nowrap;
		font-size: 34rpx;
		color: #333333;
	}
	.active{
		color: #2AABAD;
		border-bottom: 2px solid #2AABAD;
	}
	// 列表区
	.Know_lsit {
		// margin: 0 40rpx;
		padding: 0 20rpx;
		.Know_item {
			display: flex;
			width: 100%;
			box-sizing: border-box;
			padding: 40rpx 20rpx;
			border-bottom: 1rpx solid #dcdcdc;
			border-radius: 20rpx;
			box-shadow: 0px 0px 13px 0px 
					rgba(40, 40, 40, 0.13);
			margin-bottom: 20rpx;		
			.Know_item_img {
				margin-right: 24rpx;
				width: 194rpx;
				height: 194rpx;
				flex-shrink: 0;
				display: flex;
				border-radius: 20rpx;
			}
	
			.Know_item_info {
				width: 70%;
				font-size: 30rpx;
				font-weight: bold;
				height: 194rpx;
				box-sizing: border-box;
				padding-top:24rpx ;
				padding-bottom: 10rpx;
				&>view:nth-child(1) {
					// margin: 52rpx 0;
					margin-bottom: 52rpx;
					height: 45%;
					font-size: 28rpx;
				}
	
				.Know_info_fb {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
	
					text {
						margin: 0;
					}
				}
			}
		}
	
		// 选择最后的 .Know_item元素 取消边框
		& .Know_item:last-child {
			border: none;
		}
	}
</style>
